<template>
  <div :style="{ padding: '20px' }">
    <el-form :inline="false" size="normal">
      <el-form-item size="normal">
        <el-input
          v-model="roleItemData.name"
          :disabled="true"
          placeholder=""
          size="normal"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item size="normal">
        <el-tree
          :data="treeData"
          ref="dataTree"
          show-checkbox
          node-key="id"
          default-expand-all
          :default-checked-keys="checkTreeList"
          :props="defaultProps"
        >
        </el-tree>
      </el-form-item>
      <el-form-item size="normal" label-width="30px">
        <el-button type="primary" size="small" @click="getCurrentKeys"
          >确定</el-button
        >
        <el-button size="small" @click="$emit('changeShow', true)"
          >取消</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  reqrolePermissionList,
  reqPermissionList,
  roledoAssign
} from "@/api/aci_permission";
import { cloneDeep } from "lodash";
export default {
  name: "Auth",
  props: ["roleItemData"],
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      checkTreeList: []
    };
  },
  mounted() {
    this.getrolePermissionList();
  },
  methods: {
    async getrolePermissionList() {
      let re = await reqrolePermissionList(this.roleItemData.id);
      this.treeData = re.children;
      this.recursionCheckTree(cloneDeep(re.children));
    },
    //定义递归获取选中的数组
    recursionCheckTree(list) {
      list.forEach(item => {
        if (item.children.length > 0) {
          this.recursionCheckTree(item.children);
        } else if (item.select) {
          this.checkTreeList.push(item.id);
        }
      });
    },
    // 获取选中节点的key
    async getCurrentKeys() {
      const checkIdList = this.$refs.dataTree.getCheckedKeys();
      await roledoAssign(this.roleItemData.id, checkIdList.join(","));
      this.$message({
        type: "success",
        message: "数据修改成功"
      });
      this.$emit("changeShow", true);
    }
  },
  computed: {}
};
</script>

<style></style>
